{% extends 'sales/base.html' %}
{% load static %}
{% load thumbnail %}
{% block extralinks %} 
<style>
  .text_ellipsis {
    width: 16em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
{% endblock %}
{% block content %}
{% load common_tags %}

<div class="row marl justify-content-center">
  <div class="col-md-9">
    
    <div class="row count_blocks_row">
      <div class="col-md-3">
        <div class="item sky_blue">
          <a href="{% url 'accounts:list'%}">
            <div class="title">Accounts</div>
            <div class="count">{{accounts|length}}</div>
            
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="item green">
          <a href="{% url 'contacts:list' %}">
            <div class="title">Contacts</div>
            <div class="count">{{contacts_count}}</div>
          </a>
          
        </div>
      </div>
      <div class="col-md-3">
        <div class="item red">
          <a href="{% url 'leads:list' %}">
            <div class="title">Leads</div>
            <div class="count">{{leads_count|length}}</div>
            
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="item yellow">
          <a href="{% url 'opportunity:list' %}">
            <div class="title">Opportunities</div>
            <div class="count">{{opportunities|length}}</div>
            
          </a>
        </div>
      </div>
    </div>
    
    <div class="open_sections row">
      <div class="col-md-6 table_container_row">
        <div class="card">
          <div class="card-body">
            <div class="card-title">
              <span>Recent Accounts</span>
            </div>
            <div class="table-responsive">
              {% if accounts %}
              <table class="table">
                <thead>
                  <tr>
                    <th width="30%">Name</th>
                    <th width="30%">Tags</th>
                    <th width="40%">Assigned To</th>
                  </tr>
                </thead>
                <tbody>
                  {% for account in accounts|slice:"10" %}
                  <tr>
                    <td>
                      <div class="text_ellipsis">
                      <a href="{% url 'accounts:view_account' account.id %}">{{account.name}}</a>
                    </div>
                    </td>
                    <td style="display: block;">
                      {% for tag in account.tags.all|slice:'3' %}
                      <span class="text-left color{{forloop.counter}} tag_class_acc" id="list_tag"
                        data-link="{{tag.id}}" style="cursor: pointer;">{{tag.name}}</span>
                      {% empty %}
                      <span class="text-left">No Tags</span>
                      {% endfor %}
                      {% if account.tags.all|length > 3 %}
                      <a href="{% url 'accounts:view_account' account.id %}">
                        <span class="text-left" id="list_tag">{{account.tags.all|length|subtract:'3'}}<span> more
                          </span></span></a>
                      {% endif %}
                    </td>
                    <td>
                      {% with users=account.assigned_to.all %}
                      {% for user in users|slice:'3' %}
                      {% if user.profile_pic %}
                      {% thumbnail user.profile_pic "40x40" crop="center" as im %}
                      <span>
                        <a href="{% url 'common:view_user' user.id %}">
                          <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                            title="{{ user.email }}">
                        </a>
                        {% endthumbnail %}
                        {% else %}
                        <a href="{% url 'common:view_user' user.id %}">
                          <img src="{% static 'images/user.png' %}" title="{{ user.email }}" width="40" height="40">
                        </a>
                      </span>
                      {% endif %}
                      {% empty %}
                      <span class="text-left">None</span>
                      {% endfor %}
                      {% if users|length > 3 %}
                      <div>
                        <a href="{% url 'accounts:view_account' account.id %}">
                          <span class="text-left mt-2" id="list_tag">{{users|length|subtract:'3'}}<span> more
                            </span></span></a>
                      </div>
                      {% endif %}
                      {% endwith %}
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
              {% else %}
              <p style="text-align:center">There are no records</p>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 table_container_row">
        <div class="card">
          <div class="card-body">
            <div class="card-title">
              <span>Recent Opportunities</span>
            </div>
            <div class="table-responsive">
              {% if opportunities %}
              <table class="table">
                <thead>
                  <tr>
                    <th width="30%">Name</th>
                    <th width="30%">Tags</th>
                    <th width="40%">Assigned To</th>
                  </tr>
                </thead>
                <tbody>
                  {% for opportunity in opportunities|slice:"10" %}
                  <tr>
                    <td>
                      <div class="text_ellipsis">
                      <a href="{% url 'opportunity:opp_view' opportunity.id %}">{{opportunity.name}}</a>
                    </div></td>
                    <td style="display: block;">
                      {% for tag in opportunity.tags.all|slice:'3' %}
                      <span class="text-left color{{forloop.counter}} tag_class_opp" id="list_tag"
                        data-link="{{tag.id}}" style="cursor: pointer;">{{tag.name}}</span>
                      {% empty %}
                      <span class="text-left">No Tags</span>
                      {% endfor %}
                      {% if opportunity.tags.all|length > 3 %}
                      <a href="{% url 'opportunity:opp_view' opportunity.id %}">
                        <span class="text-left" id="list_tag">{{opportunity.tags.all|length|subtract:'3'}}<span> more
                          </span></span></a>
                      {% endif %}
                    </td>
                    <td>
                      {% with users=opportunity.assigned_to.all %}
                      {% for user in users|slice:'3'  %}
                      {% if user.profile_pic %}
                      {% thumbnail user.profile_pic "40x40" crop="center" as im %}
                      <span>
                        <a href="{% url 'common:view_user' user.id %}">
                          <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                            title="{{ user.email }}">
                        </a>
                        {% endthumbnail %}
                        {% else %}
                        <a href="{% url 'common:view_user' user.id %}">
                          <img src="{% static 'images/user.png' %}" title="{{ user.email }}" width="40" height="40">
                        </a>
                      </span>
                      {% endif %}
                      {% empty %}
                      <span class="text-left">None</span>
                      {% endfor %}
                      {% if users|length > 3 %}
                      <a href="{% url 'opportunity:opp_view' opportunity.id %}">
                        <span class="text-left mt-2" id="list_tag">{{users|length|subtract:'3'}}<span> more
                          </span></span>
                      </a>
                      {% endif %}
                      {% endwith %}
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
              {% else %}
              <p style="text-align:center">There are no records</p>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}
{% block js_block %}
<script type="text/javascript">

  $(document).ready(function () {
    $(".tag_class_opp").click(function () {
      // $(".tag_class_opp").css('cursor', 'pointer')
      url = "{% url 'opportunity:list' %}"
      url = url + "?tag=" + $(this).attr('data-link')
      window.location.href = url;
    });

    $(".tag_class_acc").click(function () {
      // $(".tag_class_acc").css('cursor', 'pointer')
      url = "{% url 'accounts:list' %}"
      url = url + "?tag=" + $(this).attr('data-link')
      window.location.href = url;
    });

  });

</script>
{% endblock js_block %}